<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#chart" data-toggle="tab" @click="initBar()">图表展示</a></li>
      <li><a href="#table" data-toggle="tab" @click="page(1)">列表展示</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="chart" style="margin-top: 10px">
        <div class="col-md-12">
          <form id="bar_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
            <vue-area-4
                areaId="areaId"
                areaName="areaName"
                :areaIdVal="staff.dto().areaId"
                :areaNameVal="staff.dto().areaName"
                :areaFixed="staff.dto().areaId"
                :selectBy="staff.dto().areaId"
            ></vue-area-4>
            <div class="form-group">
              <button type="submit" class="btn btn-sm btn-primary" @click="initBar()">搜索</button>
              <!--<button type="reset" class="btn btn-sm btn-dafault">重置</button>-->
            </div>
          </form>
        </div>
        <div class="echarts col-md-12" id="echarts-bar-patrol"></div>
      </div>
      <div class="tab-pane" style="margin-top: 10px" id="table">
        <div class="row">
          <div class="col-md-12">
            <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
              <vue-area-4
                  areaId="areaId"
                  areaName="areaName"
                  :areaIdVal="staff.dto().areaId"
                  :areaNameVal="staff.dto().areaName"
                  :areaFixed="staff.dto().areaId"
                  :selectBy="staff.dto().areaId"
              ></vue-area-4>
              <div class="form-group">
                <label class="font-noraml">创建时间</label>
                <div class="input-daterange input-group">
                  <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control" name="startTime" id="startTime"/>
                  <span class="input-group-addon">到</span>
                  <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control" name="endTiem" id="endTime"/>
                </div>
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                <button type="reset" class="btn btn-sm btn-dafault">重置</button>
              </div>
            </form>
            <a href="javascript:;" @click="exportXls()" v-if='staff.hasPermission("analysis:patrol:export:xls")' class="btn btn-info m-t"><i class="fa fa-file-excel-o"></i> 导出数据</a>
            <div class="table-responsive table-scrollable">
              <table class="table table-bordered table-striped  table-hover">
                <thead>
                <tr>
                  <th style="width:20px;">#</th>
                  <th>行政区划</th>
                  <th>县级实际巡查次数</th>
                  <th>县级巡查率</th>
                  <th>乡镇级实际巡查次数</th>
                  <th>乡镇级巡查率</th>
                  <th>村级实际巡查次数</th>
                  <th>村级巡查率</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
                  <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
                  <td>{{ item.areaName }}</td>
                  <td>{{ item.count3w }}</td>
                  <td>{{ fmtRate(item.count3w, item.count3) + '%' }}</td>
                  <td>{{ item.count4w }}</td>
                  <td>{{ fmtRate(item.count4w, item.count4) + '%' }}</td>
                  <td>{{ item.count5w }}</td>
                  <td>{{ fmtRate(item.count5w, item.count5) + '%' }}</td>
                </tr>
                <tr v-if="result.data.data==null || result.data.data.length==0">
                  <td colspan="8">
                    <div class="alert"><strong>{{ result | message }}</strong></div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div class="b_page" v-html="tagPages"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.echarts {
  height: 540px;
}
</style>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import {$storage, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'
import echarts from 'echarts'
import Swal from 'sweetalert2'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import vueArea4 from '@/components/vue-area-4'

var patrolBarChart;
var patrolBarChartOption;
export default {
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  components: {
    'vue-area-4': vueArea4, echarts
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.initChart();
      that.getBarData();
    });
    laydate.render({elem: '#startTime', event: 'click'});
    laydate.render({elem: '#endTime', event: 'click'});
  },
  methods: {
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      axios.post(site.patrolTask.patrolStat + '/' + pageIndex + '/10'
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          Swal.fire(result.message);
        }
      });
    },
    initChart() {
      patrolBarChart = echarts.init(document.getElementById('echarts-bar-patrol'));
      patrolBarChartOption = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '县级', '乡镇级', '村级']
            //   ,['Matcha Latte', 43.3, 85.8, 93.7],
            // ['Milk Tea', 83.1, 73.4, 55.1],
            // ['Cheese Cocoa', 86.4, 65.2, 82.5],
            // ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {name: '巡查率(%)'},
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      };
      $(window).resize(patrolBarChart.resize);
    },
    getBarData() {
      let that = this;
      axios.post(site.patrolTask.patrolStat
          , $('#bar_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let list = result.data;
          for (let i in list) {
            // debugger
            let array = [];
            // 行政区划名字
            array[0] = list[i].areaName;
            // 县级巡查率
            array[1] = that.fmtRate(list[i].count3w, list[i].count3);
            // 乡镇级巡查率
            array[2] = that.fmtRate(list[i].count4w, list[i].count4);
            // 村级巡查率
            array[3] = that.fmtRate(list[i].count5w, list[i].count5);
            patrolBarChartOption.dataset.source.push(array)
          }
          patrolBarChart.setOption(patrolBarChartOption);
        } else {
          Swal.fire(result.message);
        }
      });
    },
    initBar() {
      let that = this;
      that.initChart();
      that.getBarData();
    },
    // 巡查率保留两位小数
    fmtRate(numw, num) {
      // 如果巡查完成次数是0，直接返回巡查率0
      if (numw === '0') {
        return 0;
      }
      // 已完成次数除总数，乘100转换成百分数，保留两位小数
      return (numw / num * 100).toFixed(2)
    },
    exportXls() {
      let formJson = $('#info_search_form').serializeObject();
      // console.info(formJson)
      var formHtmlStr = `<form method="post" action="${site.patrolTask.exportXls}">
                               <input type="hidden" name="Authorization" value="${$storage.getItem('authorizationToken')}">`;
      for (let key in formJson) {
        // console.info(key)
        formHtmlStr += `<input type="hidden" name="${key}" value="${formJson[key]}">`;
      }
      formHtmlStr += `</form>`;
      // console.info(formHtmlStr)
      var $eleForm = $(formHtmlStr);
      $(document.body).append($eleForm);
      // 提交表单，实现下载
      $eleForm.submit().remove();
    }
  }
}
</script>
